<template>
  <div class="container">
    <h4>部署记录</h4>
    <el-form :model="form" class="form" label-width="120px">
      <el-row type="flex">
        <el-col :span="6">
          <el-form-item label="部署环境：">
            <el-select v-model="listQuery.envName" placeholder="请选择部署环境">
              <el-option v-for="item in envOptions" :key="item" :label="item" :value="item"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="应用名称：">
            <el-input v-model="listQuery.appName" placeholder="请输入应用名称"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="部署人：">
            <el-input v-model="listQuery.createName" placeholder="请输入部署人"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="分支：">
            <el-input v-model="listQuery.branchName" placeholder="请输入分支"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col :span="6">
          <el-form-item label="部署状态：">
            <el-select v-model="listQuery.deployStatus" clearable placeholder="请选择部署状态">
              <el-option v-for="item in statusList" :key="item.id" :label="item.label" :value="item.id"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="18">
          <el-form-item label="部署时间：">
            <el-date-picker
              v-model="form.date"
              type="datetimerange"
              range-separator="至"
              start-placeholder="部署开始时间"
              end-placeholder="部署结束时间"
            />
            <el-button type="primary" class="mar_l_15" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table v-loading="listLoading" :data="list" border style="width: 100%">
      <el-table-column fixed label="序号" align="center" width="80">
        <template slot-scope="scope">
          <span>{{ scope.$index+1 }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed prop="appName" label="应用名称" align="center" width="140"/>
      <el-table-column fixed prop="env" label="环境" align="center" width="120"/>
      <el-table-column prop="branch" label="分支" align="center" />
      <el-table-column label="部署状态" align="center" width="140">
        <template slot-scope="scope">
          <span>{{ statusDict[scope.row.status] }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="createUser" label="部署人" align="center" width="120"/>
      <el-table-column label="部署时间" align="center" width="250">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime | formatDate1 }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center" width="200">
        <template slot-scope="scope">
          <el-button type="success" size="mini" @click="handleClick(scope.row)">查看日志</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination :current-page="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.length" :total="total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
    </div>
  </div>
</template>
<script>

import { formatDate } from '../../utils/Common.js'
import {
  fetchRecordList,
  fetchAllEnvList
} from '@/api/build/appconfig'

export default {
  name: 'Deployrecord',
  filters: {
    formatDate1: function(time) {
      if (time) {
        const date = new Date(time)
        return formatDate(date, 'yyyy-MM-dd hh:mm:ss') // 年-月-日 时分
      }
      return time
    }
  },
  data() {
    return {
      form: {
        environment: 'dev',
        name: '',
        status: 1,
        branch: '',
        date: '',
        current: 1,
        size: 20
      },
      listLoading: true,
      listQuery: {
        pageNo: 1,
        length: 20,
        createName: '',
        endDate: '',
        startDate: '',
        date: '',
        branchName: '',
        appName: '',
        envName: 'dev',
        deployStatus: '',
        descending: 'true',
        sortBy: 'create_time'
      },
      total: 0,
      statusList: [
        { id: 4, label: '构建失败' },
        { id: 3, label: '构建成功' },
        { id: 2, label: '构建中' },
        { id: 1, label: '准备构建' },
        { id: 0, label: '审批通过' },
        { id: 5, label: '等待审批' },
        { id: 6, label: '审批驳回' }
      ],
      statusDict: {
        4: '构建失败',
        3: '构建成功',
        2: '构建中',
        1: '准备构建',
        0: '审批通过',
        5: '等待审批',
        6: '审批驳回'
      },
      envOptions: []
    }
  },
  created() {
    this.getEnvList()
    this.getRecordList()
  },
  methods: {
    onSubmit() {
      this.getRecordList()
    },
    handleClick(row) {},
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getRecordList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getRecordList()
    },
    getEnvList() {
      fetchAllEnvList().then(response => {
        this.envOptions = response.data
        this.listQuery.envName = this.envOptions[0]
      })
    },
    getRecordList() {
      this.listLoading = true
      if (this.form.date) {
        this.listQuery.startDate = formatDate(this.form.date[0], 'yyyy-MM-dd hh:mm:ss')
        this.listQuery.endDate = formatDate(this.form.date[1], 'yyyy-MM-dd hh:mm:ss')
      } else {
        this.listQuery.startDate = ''
        this.listQuery.endDate = ''
      }
      fetchRecordList(this.listQuery).then(response => {
        this.list = response.data.data
        this.total = response.data.totalProperty
        this.listLoading = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.form {
  .el-input {
    width: 175px;
  }
  .mar_l_15 {
    margin-left: 15px;
  }
}
.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}
</style>

